<template>
  <div class="my-detail-main-box">
    <el-form ref="form" :model="form"  label-width="80px">
      <el-form-item label="标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入标题" :readOnly="true"/>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <editor ref="editor" v-model="form.content" :min-height="180" :readOnly="true"/>
      </el-form-item>
      <el-form-item label="类别" prop="categoryId">
        <el-cascader
          v-model="form.categoryId"
          :options="leaningCategoryList"
          :props="props"
          @change="changeCategory">
        </el-cascader>
      </el-form-item>
      <el-form-item label="附件" prop="attachment">
        <file-upload v-model="form.attachment" :isShowTip="false"/>
      </el-form-item>
    </el-form>
    <div class="btn-back">
      <el-button class="form_button_item" @click="goBack">返回</el-button>
    </div>
  </div>
</template>

<script>
  import {getLeaningUser} from "@/api/examine/leaningUser";
  import  {common} from "./common.js"

  export default {
        name: "myDetail",
        mixins:[common],
        data(){
          return {
            id: '',
            form:{
              title: '',
              content: '',
              categoryId: null,
              attachment: ''
            }
          }
        },
        methods:{
          getDetail(){
            getLeaningUser(this.id).then(res=>{
                this.form = res.data
            })
          },
          goBack(){
            this.$router.push({path: "/leaning/myList"});
          }
        },
        created() {
          if(this.$route.query.id){
            this.id =  this.$route.query.id
            this.getDetail();
            this.$nextTick(()=>{
              this.$refs.editor.hideToolbar();
            })
          }
        }
    }
</script>

<style scoped lang="scss">
  .my-detail-main-box{
    padding: 30px 0;
    width: 80%;
    margin-left: 9%;
    ::v-deep{
      .upload-file-uploader{
        display: none;
      }
      .el-link--inner{
        color: rgb(64, 158, 255);;
      }
      .el-upload-list__item{
        padding: 0 10px;
      }
    }
    .btn-back{
      text-align: center;
    }
  }
</style>
